<template>
	<view class="container">
		<!-- 筛选 -->
		<view class="choose">
			<view style="height: 15upx;"></view>
			<v-tabs fontSize="34upx" v-model="current" :scroll="false" lineColor="#5CAE77 " activeColor="#5CAE77" @change="changeTab" :tabs="['全部','待付款','待发货','待提货']"></v-tabs>
		</view>
		
		<!-- 订单列表 -->
		<view class="list" @click="order_detail(item)" v-for="(item,index) in list">
			<!-- 订单～～～上 -->
			
			<view class="list-top">
				<view :class="item.delivery != 1 ? 'list-top-left' : 'list-top-left list-top-left1'">{{ item.delivery == 1 ? '自提' : '配送' }}</view>
				<view class="list-top-right">
					<view v-if="item.orderStatus != 1" class="status-text">{{ item.orderStatusText }}</view>
					<uni-countdown v-if="item.orderStatus == 1" :color="textColor" @timeup="stop_time(index)" :set-member="'ws'" :show-day="false" :hour="0" :minute="item.computeTime[0]" :second="item.computeTime[1]"></uni-countdown>
				</view>
			</view>	
			<!-- 订单～～～中 -->
			<view class="list-center">
				<view class="list-center-ordernum">订单号:{{ item.mallOrderNo }}</view>	
				<!-- 商品列表 -->
				<view class="list-center-shop" v-for="(itemTwo,indexTwo) in item.goodsList">
					<image class="list-center-shop-img" :src="itemTwo.goodsImg" mode=""></image>
					<view class="list-center-shop-info">
						<view class="list-center-shop-info-name">{{ itemTwo.goodsName }}</view>
						<view class="list-center-shop-info-sc">
							<view class="list-center-shop-info-sc-l">数量:{{ itemTwo.goodsNumber }}</view>
							<view class="list-center-shop-info-sc-r">¥{{ item.goodsTotalPrice }}</view>
						</view>
					</view>	
				</view>
				
				<!-- <view v-if="item.goodsList.length > 2">
					<view @click.stop="look_all(index,99)" v-if="item.showGoodNum != 99" class="list-center-set">查看全部 <uni-icons type="bottom"></uni-icons> </view>
					<view @click.stop="look_all(index,2)" v-if="item.showGoodNum == 99" class="list-center-set">收起 <uni-icons type="top"></uni-icons> </view>	
				</view>
				<view class="list-center-shop-price">
					<view class="list-center-shop-price-l">总价：¥{{ item.goodsTotalPrice }}</view>
					<view v-if="item.delivery != 1" class="list-center-shop-price-r">运费：¥{{ item.expressFee }}</view>
				</view> -->
			</view>
			<!-- 订单～～～下 -->
			<view class="list-center-btm" v-if="item.orderStatus != 99 && item.orderStatus != 98">
				<view style="flex: 1;"></view>
				<view v-if="item.orderStatus == 1" class="list-center-btm-2"> 待付款:¥{{ item.payPrice }}</view>
				<view @click.stop="go_pay(item.mallOrderNo)" class="list-center-btm-btn" v-if="item.orderStatus == 1">重新付款</view>
				<view v-else-if="item.orderStatus == 2" class="list-center-btm-l"> 待付款:¥{{ item.payPrice }}</view>
				<view v-else class="list-center-btm-l"> 已付款:¥{{ item.payPrice }}</view>
			</view>
		</view>
		<view v-if="list.length <= 0">
			<view class="n-center-box">
				<image src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/empty.png"></image>
				<view class="n-title">暂无数据！</view>
			</view>
		</view>
		<view style="height: 50upx;width: 100%;background-color: #ffffff;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topHeight:0,
				textColor:'#FF7E3E',
				bgcColor:'#FD4400',
				
				list:[],
				goodsName:'',
				page:1,
				pageSize:10, 
				totalPage:0,		
				current: 0,
				type:0
			}
		},
		onShow() {
		},
		onLoad(req) {
			if(req.type){
				this.current = req.type;
			}
			this.getOrder();
		},
		methods: {
			changeTab(index) {
				if(index === 2){
					this.type = 11
				}else if(index === 3){
					this.type = 10
				}else{
					this.type = index;
				}
				this.current = index;
				this.page = 1;
				this.list = [];
			    this.getOrder();
			},
			// 获取订单列表
			async getOrder() {
			  let postData = {
					page:this.page,
					pageSize:this.pageSize,
					orderStatus:this.type,
				}
			  let res = await this.$javaCircle.doRequest("post", "vs/mall/getOrderList", postData, 'json', true)
			  if (res.data.code === 0) {
				let tempList = res.data.data.data
				for(var i = 0; i < tempList.length; i++ ) {
					tempList[i].orderStatusText = this.getTypeName(tempList[i].orderStatus)
					if(tempList[i].orderStatus == 1) {
						tempList[i].computeTime = this.computeTime(i,tempList[i].closeTime);
						console.log(tempList[i].computeTime)
					}
				}
				this.list = this.list.concat(tempList);
			    this.totalPage = Math.ceil(res.data.data.total/10);
			  }else{
				  uni.showToast({icon:'none',title:res.data.message})
			  }
			},
			// 获取订单状态名称
			getTypeName(type){
				switch(type){
					case 1:
					return '待支付';
					case 2:
					return '支付中';
					break;
					case 10:
					return '待提货';
					break;
					case 11:
					return '待发货';
					break;
					case 21:
					return '已发货';
					break;
					case 50:
					return '已完成';
					break;
					case 99:
					return '已关闭';
					break;
					case 98:
					return '已退款';
					break;
				}
			},
			getOrder2() {
				var that = this;
				var data = {
					page:this.page,
					pageSize:this.pageSize,
					orderStatus:this.current == 0 ? 100 : this.current-1,
					goodsName:this.goodsName,
				};
				that.$javaApi.doRequest("post","buying/group/customer/getGroupBuyOrderList",data,'json').then(res=>{
					if(res.data.code == 0) {
						var list = res.data.data.list;
						for(var i = 0; i < list.length; i++ ) {
							if(list[i].orderStatus == 0) { list[i].orderStatusText = '倒计时'; }
							if(list[i].orderStatus == 1) { list[i].orderStatusText = '已付款'; }
							if(list[i].orderStatus == 10) { list[i].orderStatusText = '待发货'; }
							if(list[i].orderStatus == 11) { list[i].orderStatusText = '已发货'; }
							if(list[i].orderStatus == 20) { list[i].orderStatusText = '待提货'; }
							if(list[i].orderStatus == 21) { list[i].orderStatusText = '已收货'; }
							if(list[i].orderStatus == 50) { list[i].orderStatusText = '已退款'; }
							if(list[i].orderStatus == 60) { list[i].orderStatusText = '已关闭'; }
							if(list[i].orderStatus == 100) { list[i].orderStatusText = '已完成'; }
							
							list[i].showGoodNum = 2;
							if(list[i].orderStatus == 0) {
								list[i].minutes = this.computeTime(i,list[i].updateTimeUnix)[0];
								list[i].seconds = this.computeTime(i,list[i].updateTimeUnix)[0];
								// var endTime = +new Date("2022-10-29 10:00:00");
								// list[i].minutes = this.computeTime(endTime)[0];
								// list[i].seconds = this.computeTime(endTime)[1];
							}
							for(var j = 0; j < list[i].goodList.length;j++) {
								list[i].goodList[j].goodsImg = JSON.parse(list[i].goodList[j].goodsImg)
								if(list[i].goodList[j].goodsImg) {
									list[i].goodList[j].current_img = list[i].goodList[j].goodsImg.length > 0 ? list[i].goodList[j].goodsImg[0] : 'https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/shop/beijing.png';
								}else {
									list[i].goodList[j].current_img = 'https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/shop/beijing.png';
								}
							}
						}
						this.totalPage = Math.ceil(res.data.data.totalNum/10);
						this.list = this.list.concat(list);
					}else {
						uni.showToast({
							icon:'none',
							title:res.data.message,
						})
					}
				})
			},
			look_all(index,num) {
				this.list[index].showGoodNum = num;
			},
			computeTime(index,endTime) {
				var date = new Date(endTime);  
				var timestamp = date.getTime();
				//获取当前时间的时间戳（单位毫秒）
				var nowTime = Date.parse(new Date());
				
				let date3 = Math.floor((timestamp - nowTime))
				
				//计算出小时数 
				let leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数 
				let hours = Math.floor(leave1 / (3600 * 1000))
				//计算相差分钟数 
				let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数 
				let minutes = Math.floor(leave2 / (60 * 1000))
				//计算相差秒数 
				let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数 
				let seconds = Math.round(leave3 / 1000)
				if(minutes == 0 && seconds == 0) {
					this.list[index].orderStatus = 60;
					return
				}
				var arr = [];
				arr.push(minutes)
				arr.push(seconds)
				return arr
			},
			stop_time(index) {
				// item.orderStatus = 60;
				// this.list[index].orderStatusText = '已关闭';
				// this.list[index].orderStatus = 60;
				// this.orderInfo.orderComplete = 0;
			},
			// 订单详情
			order_detail(item) {
				uni.navigateTo({
					url:'/shop/pages/order/detail?orderNo='+item.mallOrderNo
				})
			},
			// 跳转到支付页面
			go_pay(orderNo) {
				uni.navigateTo({
					url:'/shop/pages/index/order?orderNo='+orderNo +'&repay=1'
				})
			},
			// 取消付款
			cancel_pay(orderNo){
				this.$javaApi.doRequest("post","buying/group/customer/closeOrderByHand?orderNo="+orderNo ,{},'json').then(res=>{
					if(res.data.code == 0) {
						uni.showToast({icon:'none',title:'取消成功'})
						this.changeTab(0)
					}else {
						uni.showToast({
							icon:'none',
							title:res.data.message,
						})
					}
				})
			},
			back() {  uni.navigateBack()  },
		},
		onReachBottom: function(){
		    if(this.totalPage > this.page) {
		        this.page++;
		        this.getOrder();
		    }
		},
	}
</script>

<style scoped>
.container {
	background: #F3F5F8;
}
.choose {
	width: 750upx;
	height: 104upx;
	background-color: #fff;
}
.list {
	width: 706upx;
	min-height: 1upx;
	margin: 0 auto;
	border-radius: 8upx;
	background-color: #fff;
	margin-top: 20upx;
}
.list-top {
	width: 654upx;
	height: 90upx;
	line-height: 90upx;
	margin: 0 auto;
	display: flex;
	border-bottom: 2upx solid #F1F1F1;
	align-items: center;
}
.list-top-left {
	font-size: 40upx;
	font-weight: bold;
	color: #70B700;
	flex: 1;
}
.list-top-left1 {
	color: #F59A23;
}
.list-top-right {
	display: flex;
}
.list-center {
	width: 654upx;
	min-height: 1upx;
	margin: 0 auto;
	border-bottom: 2upx solid #F1F1F1;
}
.list-center-ordernum {
	font-size: 34upx;
	font-weight: 500;
	color: #333;
	padding:30upx 0;
}
.list-center-shop {
	width: 654upx;
	min-height: 1upx;
	margin: 0 auto;
	display: flex;
	margin-bottom: 20upx;
	/* align-items: center; */
}
.list-center-shop-img {
	width: 156upx;
	height: 156upx;
	padding-right: 30upx;
}
.list-center-shop-info {
	flex: 1;
}
.list-center-shop-info-name {
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	font-size: 36upx;
	color: #333;
}
.list-center-shop-info-sc {
	display: flex;
	padding-top: 10upx;
}
.list-center-shop-info-sc-l {
	flex: 1;
	color: #888;
	font-size: 30upx;
}
.list-center-shop-info-sc-r {
	font-size: 32upx;
	color: #333;
}
.list-center-set {
	text-align: center;
	font-size: 32upx;
	color: #666;
}
.list-center-shop-price {
	display: flex;
	font-size: 32upx;
	color: #fff66;
	padding: 20upx 0;
}
.list-center-shop-price-l {
	flex: 1;
}
.list-center-shop-price-l {
	
}
.list-center-btm {
	width: 654upx;
	min-height: 1upx;
	padding:20upx;
	margin: 0 auto;
	align-items: center;
	display: flex;
}
.list-center-btm-l {
	font-size: 35upx;
	font-weight: bold;
	color: #000000;
}
.list-center-btm-2 {
	font-size: 35upx;
	font-weight: bold;
	color: #5CAE77;
}
.list-center-btm-l1 {
	color: #000;
}
.list-center-btm-btn {
	width: 200upx;
	height: 74upx;
	line-height: 74upx;
	text-align: center;
	color: #fff;
	font-size: 32upx;
	font-weight: 600;
	background: #5CAE77;
	border-radius: 37upx;
	margin-left: 30upx;
}
.status-text{
	font-size: 36rpx;
	color: #999999;
}
/deep/ .uni-countdown__number{
	font-size: 40rpx !important;
}
.n-center-box{
		position: fixed;
		top: 0;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 364upx;
	}
	.n-center-box image {
		width: 400upx;
		height: 400upx;
	}
	.n-title {
		width: 750upx;
		text-align: center;
		font-size: 34upx;
		font-weight: 400;
		color: #333333;
		margin-top: 30upx;
	}
</style>
